<template>
    <div>

        <div class="table-container">


            <router-link to="/home/addUser">
                <el-button type="primary" class="addButton"> 新增用户 </el-button>
            </router-link>


            <el-table :data="users" stripe style="width: 100wh; text-align: center">
                <el-table-column align="center" prop="userId" label="用户ID">
                </el-table-column>
                <el-table-column align="center" prop="username" label="用户名称">
                </el-table-column>
                <el-table-column align="center" prop="password" label="密码">
                </el-table-column>
                <el-table-column align="center" prop="phone" label="电话">
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="修改时间">
                </el-table-column>
                <el-table-column align="center" prop="lastLoginTime" label="上次登录时间">
                </el-table-column>

                <el-table-column align="center" label="用户角色">

                    <template slot-scope="scope">
                        <div v-for="(role, index) in scope.row.roles" :key="index">
                            <el-tag size="mini">{{ role.roleName }}</el-tag>
                        </div>
                    </template>

                </el-table-column>

                <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.status == 1 ? "可用" : "禁用" }}
                    </template>
                </el-table-column>
                <el-table-column align="center" width="150px">
                    <template slot="header">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <router-link :to="{ path: '/home/editUser', query: { userId: scope.row.userId } }">
                            <el-button size="mini">修改</el-button>
                        </router-link>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.userId)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="page" background layout="prev, pager, next,total" :total="100">
            </el-pagination>
        </div>

    </div>
</template>

<script>

import { getUserList, deleteByUserId } from '@/api/user.js'

export default {
    data() {
        return {
            search: "",
            users: [],
        }
    },
    methods: {
        // 删除按钮 确认 对应的方法
        handleDelete(userId) {
            this.$confirm("确认删除吗", "提示").then((result) => {
                deleteByUserId(userId).then((result) => {

                    getUserList().then((result) => {
                        this.users = result.data
                    }).catch((err) => {

                    });

                }).catch((err) => {

                });
            }).catch((err) => {

            });

        }
    },
    mounted() {
        getUserList().then((result) => {
            this.users = result.data
        }).catch((err) => {

        });
    }
}
</script>


<style>
.table-container {
    position: relative;
}

.addButton {
    position: absolute;
    top: 10px;
    /* 距离顶部的距离，根据需要调整 */
    right: 10px;
    /* 距离右侧的距离，根据需要调整 */
    z-index: 1;
}
</style>